<template>
	<view class='szjp'>
		<view v-if="show">
			<view class="mask" @tap="Close"></view>
			<view class="box" :class="AlertObj[AlertClass][AlertClassUp]">
				<view class="bottom">
					<view class="bg">
						<image src="./static/bg.png" mode="widthFix" />
					</view>
					<view class="tle">
						<view class="tle_lft">
							<image src="./static/pwd.png" mode="widthFix" />
							<view class="tle_1">{{txt}}</view>
							<view class="tle_2">(长度{{pwdlength}}位)</view>
						</view>
						<view class="tle_rgt" @tap.stop="is_vis=!is_vis">
							<block v-if="is_vis">
								<image src="./static/yj2.png" mode="widthFix" />
							</block>
							<block v-else>
								<image src="./static/yj1.png" mode="widthFix" />
							</block>
						</view>
					</view>
					<view class="pwd_box" @click.stop>
						<view class="pwd-text" :class="{active:(idx==k)}" v-for="(v,k) in pwdlength" :key="k">
							{{star_lis[k]}}
							<!-- {{is_vis?star_lis[k]:res_pwd[k]}} -->
						</view>
					</view>
					<view class="pwd_info">
						<!-- <view>可以放些提示信息</view> -->
					</view>
					<view class="solt" @click.stop>
						<view class="s_lft">
							<button class="s_li" type="primary" plain="true" v-for="(v,k) in 9" :key="k"
								@tap="click(k+1)">{{k+1}}</button>
							<button class="s_li s_o" type="primary" plain="true" @tap=click(0)>0</button>
							<button class="s_li s_sq" type="primary" plain="true" @tap="Close">
								<image src="./static/sq.png" mode="widthFix" />
							</button>
						</view>
						<view class="s_rgt">
							<view class="s_cx">
								<button class="s_li s_x" type="primary" plain="true" @tap="del">
									<image src="./static/ht.png" mode="widthFix" />
								</button>
							</view>
							<view class="s_qd">
								<button class="s_li s_s " type="primary" plain="true" @tap="submit">确定</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/*引入插件*/
	//import  xxx  from "@/xxx";
	export default {
		props: {
			txt: {
				type: String,
				default: '支付密码'
			},
			pwdlength: {
				type: [Number, String],
				default: 1
			}
		},
		data() {
			return {
				Repeat: true,
				show: false,
				AlertObj: [
					['a-bounceinB', 'a-bounceoutB'],
				],
				AlertClass: 0,
				AlertClassUp: 0,
				res_pwd: [],
				fa_par: '',
				is_vis: false, //密码是否可见
			}
		},
		//   计算属性
		computed: {
			idx() {
				return this.res_pwd.length
			},
			star_lis() {
				if (this.is_vis) {
					return this.res_pwd
				} else {
					let arr = [];
					this.res_pwd.forEach(v => {
						arr.push('*')
					});
					return arr;
				}
			}
		},
		methods: {
			click(e) {
				if (this.res_pwd.length <= this.pwdlength - 1) {

					this.res_pwd.push(e)
					// #ifdef APP-PLUS
					plus.device.vibrate(50); //震动
					// #endif
				} else {
					this.toast(`最大长度${this.pwdlength}位`)
				}
			},
			del() {
				this.res_pwd.pop()
				// #ifdef APP-PLUS
				plus.device.vibrate(50); //震动
				// #endif
			},
			submit() {
				//   console.log('确定密码为', this.res_pwd.join(''))
				// #ifdef APP-PLUS
				plus.device.vibrate(50); //震动
				// #endif
				if (this.res_pwd.length == this.pwdlength) {
					let res = this.res_pwd.join('')
					this.$emit('pwd_e', res, this.fa_par); //调用父元素方法
					this.Close()
				} else {
					this.toast(`长度未满足`)
				}
			},

			// 打开
			Open(par) {
				if (par) {
					console.log('父元素传参', par)
					this.fa_par = par; //父元素传参  
				}
				if (!this.Repeat) {
					return false
				}
				this.res_pwd = []
				this.Repeat = false;
				this.AlertClassUp = 0;
				this.show = true
				setTimeout(() => {
					this.Repeat = true;
				}, 300);
				this.$emit('change', {
					show: true
				})
			},
			// 关闭
			Close() {
				this.$emit('change', {
					show: false
				})
				if (!this.Repeat) {
					return false
				}
				clearTimeout(this.SetTime);
				this.Repeat = false;
				this.AlertClassUp = 1;
				setTimeout(() => {
					this.show = false;
					this.Repeat = true;
				}, 300);
			},
			toast(val) {
				uni.showToast({
					title: val,
					icon: 'error',
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	/*引入css文件*/
	@import "./static/szjp.scss";
</style>
